﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="AvailableKPIPage.aspx.cs" Inherits="FBKPI.Pages.AvailableKPIPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        var oTable;
        var oTable2;
        $(document).ready(function () {
            mainmenu("#nav ul", "#nav li");
            mainmenu("#menu_wrap ul", "#menu_wrap li");

            GetSummary();

            $("#tabs").tabs();

            //datatable section
            oTable = $("#KPITable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/AvailableKPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "No"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "isActive"
                }, {
                    "mData": "GroupKPI"
                }, {
                    "mData": "CategoryKPI"
                }, {
                    "mData": "TypeKPI"
                }, {
                    "mData": "SubTypeKPI"
                }, {
                    "mData": "Periode"
                }, {
                    "mData": "Weight"
                }, {
                    "mData": "ID"
                }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','pick')\"><img src='../images/thumbup.png' /></a>";
                    },
                    "aTargets": [9]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [2]
                }, {
                    "sClass": "center",
                    "aTargets": [0, 2, 8, 9]
                }]
            });

            //mark selected row
            $('body').on("click", '#KPITable tbody tr', function () {
                $('#KPITable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            $("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------

            PickKPI = function (code, mode) {
                if (mode == 'pick') {
                    if (confirm('Are you sure to pick this KPI?')) {
                        $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.responseText);
                            },
                            success: function (data) {
                                GetSummary();
                                alert(data);
                                oTable.fnDraw();
                                oTable2.fnDraw();
                                return false;
                            }
                        });
                        return false;
                    }
                }
                else {
                    if (confirm('Are you sure to unpick this KPI?')) {
                        $.ajax({ url: '../ProcessRequest/PickAvailableKPIHandler.ashx?User=' + $("#txt_user").val() + '&KPI=' + code + "&action=" + mode, type: "POST",
                            error: function (xhr, ajaxOptions, thrownError) {
                                alert(xhr.responseText);
                            },
                            success: function (data) {
                                GetSummary();
                                alert(data);
                                oTable.fnDraw();
                                oTable2.fnDraw();
                                return false;
                            }
                        });
                        return false;
                    }
                }
            }


            oTable2 = $("#ListTable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search"
                },
                "bSort": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIPIckedSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear2").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "No"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "isActive"
                }, {
                    "mData": "GroupKPI"
                }, {
                    "mData": "CategoryKPI"
                }, {
                    "mData": "TypeKPI"
                }, {
                    "mData": "SubTypeKPI"
                }, {
                    "mData": "Periode"
                }, {
                    "mData": "Weight"
                }, {
                    "mData": "ID"
                }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        return "<a href=\"#\" onclick=\"PickKPI('" + oObj.aData["ID"] + "','unpick')\"><img src='../images/thumbdown.png' /></a>";
                    },
                    "aTargets": [9]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["isActive"] == 'True') {
                            return "<img src='../images/check.png' />"
                        } else {
                            return "<img src='../images/cross.png' />"
                        }
                    },
                    "aTargets": [2]
                }, {
                    "sClass": "center",
                    "aTargets": [0, 2, 8]
                }]
            });

            //mark selected row
            $('body').on("click", '#ListTable tbody tr', function () {
                $('#ListTable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------
            $("#ListTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear2\" oninput=\'GetList2($(this).val());\' type=\"text\" \>');
            //--------------------end of datatable section-----------------------------------------
        });

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }

        GetList2 = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear2").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable2.fnDraw();
                }
            }
            else
            { oTable2.fnDraw(); }
        }


        GetSummary = function () {
            $.ajax({
                url: "../Serializer/GetPickedKPIandTotalWeightSerializer.ashx?User=" + $("#txt_user").val(),
                success: function (data) {
                    $("#lbl_pickedkpi").text(data.PickedKPI);
                    $("#lbl_totalweight").text(data.TotalWeight + '%');
                },
                error: function (data) {
                    $("#lbl_pickedkpi").text('0');
                    $("#lbl_totalweight").text('0%');
                }
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style="height:525px;overflow:auto;" >
    <div id="kpitable">
        <div>
            <div class="customPageHeader">
                <span class="customPageTitle">Available KPI</span>
            </div>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Select KPI</a></li>
                    <li><a href="#tabs-2">Picked List</a></li>
                </ul>
                <div id="tabs-1">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                            <thead>
                                <tr>
                                <th>
                                </th>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                    <th>
                                        is Active
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="tabs-2">
                    <div>
                        <table cellpadding="0" cellspacing="0" class="display" id="ListTable">
                            <thead>
                                <tr>
                                    <th>
                                        No
                                    </th>
                                    <th>
                                        KPI Description
                                    </th>
                                    <th>
                                        is Active
                                    </th>
                                    <th>
                                        Group
                                    </th>
                                    <th>
                                        Category
                                    </th>
                                    <th>
                                        Type
                                    </th>
                                    <th>
                                        Sub Type
                                    </th>
                                    <th>
                                        Periode
                                    </th>
                                    <th>
                                        Weight
                                    </th>
                                    <th>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div>
            <table width="50%">
                <tr>
                    <td width="100px">
                        Picked KPI(s)
                    </td>
                    <td width="15px">
                        :
                    </td>
                    <td>
                        <label id="lbl_pickedkpi">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td width="100px">
                        Total Weight
                    </td>
                    <td width="15px">
                        :
                    </td>
                    <td>
                        <label id="lbl_totalweight">
                        </label>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </div>
</asp:Content>
